@import '../../colors.scss';
@import '../../styles.scss';

$cellSize: 15px;

//  _  _ ___ ___ _  _ _    ___ ___ _  _ _____ ___ _  _  ___
// | || |_ _/ __| || | |  |_ _/ __| || |_   _|_ _| \| |/ __|
// | __ || | (_ | __ | |__ | | (_ | __ | | |  | || .` | (_ |
// |_||_|___\___|_||_|____|___\___|_||_| |_| |___|_|\_|\___|

//  __  __   _   ___ _  _   _____ _   ___ _    ___
// |  \/  | /_\ |_ _| \| | |_   _/_\ | _ ) |  | __|
// | |\/| |/ _ \ | || .` |   | |/ _ \| _ \ |__| _|
// |_|  |_/_/ \_\___|_|\_|   |_/_/ \_\___/____|___|

// content of each tab
.matrices {
    @include adaptive-color-dark-only('background-color', lighten(color(dark-1), 3%));
    @include adaptive-color-dark-only('color', on-color(dark));
    @include adaptive-color-dark-only('border', none);
    overflow-x: scroll;
    min-height: 50vh;
    border: 1px solid color(panel-dark);
    transition: height ease-in-out 0.2s;

    .spinner {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 50vh;

        mat-progress-spinner circle {
            stroke: on-color-deemphasis(body);
        }
    }

    .matrices-columns {
        display: table;

        .matrix-column {
            display: table-cell;
            white-space: normal;
            padding: 10px;
            @media print {
                padding: 0;
            }

            .matrix-name {
                text-align: center;
                padding-bottom: 5px;
                margin-bottom: 5px;
                font-size: 16px;
                border-bottom: 1px solid color(panel-dark);
            }

            & + .matrix-column {
                border-left: 1px solid color(panel-dark);
            }
        }
    }
}

.colorpicker {
    width: ($cellSize + 5 + 2) * 4 !important; //override preset width
    align-items: center;
    text-align: center;

    .color-block {
        @include adaptive-color('border', 1px solid black, 1px solid color(dark-disabled));
        cursor: pointer;
        margin: 2.5px;

        &.square {
            display: inline-block;
            width: $cellSize;
            height: $cellSize;
        }

        &.wide {
            @include adaptive-color-dark-only('color', color(dark-disabled));
            display: block;
            height: $cellSize;
            font-size: 10pt;
            color: darken(white, 50%);
        }
    }
}

//color controls
.colorSetup {
    font-size: 8pt;

    .colorpicker {
        width: 10ex;
    }

    .gradient-section-label {
        font-weight: bold;
        padding: 4px;
        text-align: center;
    }

    .gradient-section-content {
        @include adaptive-color('border-color', black, white);
        border-style: solid;
        border-width: 1px 0;
        text-align: left;
    }

    .display-buttons {
        text-align: center;

        .squarebutton {
            @include adaptive-color('border', 1px solid color(panel-dark), 1px solid color(dark-disabled));
            padding: 4px 0;
            cursor: pointer;

            &:hover {
                @include adaptive-color('background', color(panel-light), color(cell-highlight-dark-color));
            }

            &.gradient:hover {
                text-decoration: underline; //since background color won't be seen on gradient buttons
            }
        }

        .presetsmenu {
            width: 90%;
            display: inline-block;
        }
    }

    .gradient-controls {
        table {
            padding: 0;
            margin: 0;
            border-collapse: collapse;

            td {
                button {
                    @include adaptive-color-dark-only('background-color', color(dark-1));
                    @include adaptive-color-dark-only('border', 1px solid color(dark-disabled));
                    @include adaptive-color-dark-only('color', white);

                    &:hover {
                        @include adaptive-color-dark-only('background-color', black);
                    }
                }

                input {
                    @include adaptive-color-dark-only('background-color', black);
                    @include adaptive-color-dark-only('color', white);
                }

                &.buttons > div {
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }

                .left,
                .right {
                    display: inline-block;
                }

                .left {
                    float: left;
                }

                .right {
                    text-align: left;

                    select {
                        width: 80px;
                    }
                }

                &.col2 {
                    width: 45px;

                    input[type='number'] {
                        width: 40px;
                    }
                }
            }

            .minmax {
                @include adaptive-color('background-color', color(panel-light), color(dark-4));
                text-align: center;
            }
        }

        .addcolor {
            width: 100%;
        }
    }
}

.select_behavior {
    padding: 5px;
    text-align: left;
}

.control-section-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  
    height: 30px;
  }
  
  .control-section-tabs {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  
    .section-label {
      cursor: pointer;
    
      padding: 6px 24px;
    
      @include adaptive-color("color", black, white);
    
      @include adaptive-color("border-color", black, white);
      border-style: solid;
      border-width: 1px;
    
      &.active {
        @include adaptive-color("background-color", white, #364370);
        @include adaptive-color("border-color", #464DFF, #464DFF);
      }
    }
  
    .control-bar-help {
      .control-help-button {
        text-align: center;
        width: 4ex;
        height: 3ex;
        padding: 5px;
  
        svg {
          @include adaptive-color-dark-only("fill", on-color(dark));
        }
        &:hover svg {
          @include adaptive-color-dark-only("fill", on-color(dark));
          fill: #505050;
        }
      }
  
      .dropdown-container {
        @include adaptive-color-dark-only("background", color(dark-3));
        @include adaptive-color-dark-only("border-color", color(dark-3));
        @include adaptive-color-dark-only("box-shadow", 2px 1px 1px color(dark-2));
        @include adaptive-color-dark-only("color", color(dark-link));
        position: absolute;
        right: 16px;
        display: flex;
        justify-content: center;
        flex-flow: column;
        background: white;
        border-style: solid;
        border-color: #ddd;
        border-width: 1px 0 1px 1px;
        box-shadow: 2px 1px 1px #ddd;
        border-radius: 0 0 5px 5px;
        padding: 10px;
        top: 40px;
        z-index: 9;
        button {
            @include adaptive-color-dark-only("color", on-color(dark));
            border: none;
            background-color: transparent;
            text-align: right;
            padding-bottom: 5px;
            &:hover {
                text-decoration: underline;
                cursor: pointer;
            }
        }
      }
    }
}

.mat-mdc-select {
    :focus {
        color: #63961c;
    }
}

.filters {
    padding: 4px;

    .filter {
        text-align: left;

        &:not(:first-child) {
            margin-top: 4px;
        }

        .filter-option {
            &:hover {
                @include adaptive-color('background', color(cell-highlight-color), color(cell-highlight-dark-color));
            }
        }
    }
}

.warning {
    @include adaptive-color('color', #b30000, #ffab0f);
}

.warning-label {
    vertical-align: super;
}

.multiselect {
    text-align: center;

    .multiselect-grouping {
        .multiselect-grouping-label {
            padding: 4px;
            font-weight: bold;
        }

        .multiselect-list {
            text-align: left;
            border-top: 1px solid black;
            border-bottom: 1px solid black;
            height: 200px;
            overflow-y: scroll;

            table {
                border-collapse: collapse;
            }

            .multiselect-list-item {
                &:hover {
                    @include adaptive-color('background', color(cell-highlight-color), color(cell-highlight-dark-color));
                }

                .multiselect-list-item-label {
                    width: 25ex;
                }

                &.selected:not(:hover) {
                    background: color(panel-dark);
                }
            }
        }
    }
}

.search {
    text-align: center;

    .search-list {
        margin-top: 2px;
        text-align: left;
        border-top: 1px solid black;
        border-bottom: 1px solid black;
        height: 300px;
        overflow-y: scroll;

        table {
            border-collapse: collapse;
            width: 325px;
        }

        .search-list-item {
            &:hover {
                @include adaptive-color('background', color(cell-highlight-color), color(cell-highlight-dark-color));
            }

            .search-list-item-label {
                width: 25ex;
            }

            &.selected:not(:hover) {
                background: color(panel-dark);
            }
        }
    }
}

.search-button {
    &:hover {
        @include adaptive-color('background', color(cell-highlight-color), color(cell-highlight-dark-color));
    }
}

.button {
    @include adaptive-color('background-color', color(panel-dark), color(dark-4));
    @include adaptive-color-dark-only('color', on-color(dark));
    border: none;
    padding: 4px 10px;
    text-align: center;
    margin: 2px 1px;
    transition: 0.3s;
    display: inline-block;
    text-decoration: none;
    cursor: pointer;

    &:hover {
        @include adaptive-color('background-color', color(button-dark), color(dark-link));
    }
}

.deselectNumber {
    font-size: 5pt;
    bottom: 2px;
    right: 4px;
    position: absolute;
    text-align: right;
}

.legend {
    @include adaptive-color('background-color', white, color(dark-3));
    @include adaptive-color-light-only('border-left', 1px solid color(panel-dark));
    z-index: 999;
    position: fixed;
    bottom: 0;
    right: 0;
    width: 300px;
    height: fit-content;
    @media print {
        display: none;
    }

    .itemArea {
        @include adaptive-color-dark-only('color', on-color(dark));
        position: static;
        overflow-y: scroll;
        margin: 30px 8px 8px;
        height: 270px;
        width: 100%;
        overflow-x: hidden;

        .item + .item {
            margin-top: 6px;
        }
        .item {
            width: 100%;
            padding-left: 5px;

            .label {
                margin-left: 10px;
                width: 180px;
            }
        }
    }
}

.legendBar {
    @include adaptive-color('background-color', color(panel-dark), color(dark-3));
    @include adaptive-color-dark-only('color', on-color(dark));
    z-index: 999;
    position: fixed;
    bottom: 0;
    right: 0;
    width: 300px;
    height: 30px;
    transition: 0.3s;
    display: flex;
    @media print {
        display: none;
    }
    align-items: center;

    .title {
        flex: 1;
        text-align: center;
        font-size: 14px;
    }

    &:hover {
        @include adaptive-color('background', color(cell-highlight-color), color(cell-highlight-dark-color));
        cursor: pointer;
    }
}

.layout {
    width: 100px;
    text-align: left;

    select {
        width: 100%;
    }

    .section {
        padding: 10px;

        & + .section {
            border-top: 1px solid color(panel-light);
        }
    }

    .subsection {
        padding-left: 5px;

        .inner-dropdown-container {
            margin: 5px;
        }
    }
}

.list-input {
    width: 250px !important;
    overflow-y: auto;
    max-height: 50vh;
}
